<template>
    <div>
        <el-form :model="formData" inline="true" ref="formData" :rules=rules
                 class="demo-form-inline" style="margin-left: 100px" labelWidth="100px">
            <el-row style="">
                <el-col>
                    <el-form-item label="请选择客户" prop="cid">
                        <el-select
                            v-model="formData.cid"
                            filterable
                            remote
                            v-bind:style="commonstyle"
                            size="mini"
                            reserve-keyword
                            placeholder="模糊查询会员"
                            :remote-method="queryVip"
                            :loading="loading">
                            <el-option
                                v-for="item in queryviplist"
                                :key="item.cid"
                                :label="item.truename"
                                :value="item.cid">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row style="">
                <el-col>
                    <el-form-item label="产品" prop="product">
                        <el-select size="mini" v-model="formData.product" v-bind:style="commonstyle"
                                   placeholder="请选择产品">
                            <el-option
                                v-for="item in productList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.name">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row style="">
                <el-col>
                    <el-form-item label="消费金额 " prop="price">
                        <el-input size="mini" v-model="formData.price" v-bind:style="commonstyle"
                                  placeholder="必填"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row style="">
                <el-col>
                    <el-form-item label="购买数量 " prop="pnum">
                        <el-input-number size="mini" v-model="formData.pnum" v-bind:style="commonstyle"
                                         placeholder="必填"></el-input-number>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row style="">
                <el-col>
                    <el-form-item label="备注 " prop="comments">
                        <el-input size="mini" v-model="formData.comments" v-bind:style="commonstyle"
                                  placeholder="必填"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row style="">
                <el-col >
                    <el-form-item label="赠品信息" >
                        <el-select size="mini" v-model="formData.giftid" placeholder="赠品信息">
                            <el-option
                                v-for="item in giftList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row style="">
                <el-form-item label="赠品数量">
                    <el-input-number size="mini" v-model="formData.giftnum" :min="1"
                                     label="赠品数量"></el-input-number>
                </el-form-item>
            </el-row>


            <el-row>
                <el-col>
                    <el-button type="primary" style="margin-left: 200px" @click="submitForm('formData')">提交<i
                        class="el-icon-upload el-icon--right"></i></el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script>
    import {mapActions, mapState, mapMutations, mapGetters} from 'vuex'
    import {addEmployee, getRuleList, employeeDetail, updateEmployee,queryVipTip,addOrder} from '@/api/getData'

    export default {
        data() {
            return {
                queryviplist:[],
                rules: {
                    cid: [{required: true, message: '请选择客户', trigger: 'change'}],
                    product: [{required: true, message: '请选择产品', trigger: 'change'}],
                    price: [{required: true, message: '请填写价格', trigger: 'blue'}]
                },
                opertype: 'add',
                isIndeterminate: true,
                checkAll: false,
                leftmenu: 2,
                menudisabled: false,
                commonstyle: {
                    width: '300px',
                },
                value: '',
                formData: {
                    giftid:'',
                    giftnum:'1',
                    cid: '',
                    product: '',
                    price: '',
                    pnum: '1',
                    comments: '',
                }
            }
        }
        ,
        mounted() {
            if (this.giftList == null) {
                this.getGiftList();
            }
        }
        ,
        methods: {
            ...mapActions(['getGiftList', 'getPeriod', 'setEmpschool', 'deleteEmpschool', 'fillSchoolEmps', 'getAllSchool']),
            ...mapMutations(['setRuleList']),

            async queryVip() {

            },
            async queryVip(v) {
                this.loading=true;
                const res= await queryVipTip({"data":{'truename':v,'usertype':'2'}});
                if(res.success==true){
                    this.loading=false;
                    this.queryviplist=res.data;
                }


            },

            async submitForm(formName) {
                try {
                    this.$refs[formName].validate(async (valid) => {
                        if (valid) {
                            //return;
                            var data = {"data": this.formData}
                            let result = await addOrder(data);
                            if (result.success == true) {
                                this.$message({
                                    type: 'success',
                                    message: '提交客户订单成功!'
                                });
                                this.formData = {
                                    giftid:'',
                                    giftnum:'1',
                                    cid: '',
                                    product: '',
                                    price: '',
                                    pnum: '1',
                                    comments: '',
                                }
                            }
                            else {
                                this.$message({
                                    type: 'error',
                                    message: result.errmsg
                                });
                            }
                        }  else {
                            this.$notify.error({
                                title: '错误',
                                message: '请检查输入是否正确',
                                offset: 100
                            });
                        }
                    })
                } catch (err) {
                    console.log(err);
                }
            }
        }
        ,
        computed: {
            ...
                mapGetters(['productList', 'sexList','giftList'])
        }
        ,
    }

</script>

<style lang="less">
    .el-form-item {
        margin-bottom: 10px;
    }

    .el-form-item__label {
        width: 120px;
        text-align: right;
    }
</style>
